{layout name="public/layout" /}
        {include file='yxnavbar'}
<script language='javascript' src="{$_G['URL']['APP_RESOURCE_FOX']}js/designer.js"></script>
<script language='javascript' src="{$_G['URL']['APP_RESOURCE_FOX']}js/jquery.contextMenu.js"></script>
<script language='javascript' src="{$_G['URL']['APP_RESOURCE_FOX']}js/jquery.form.js"></script>
<script language='javascript' src="{$_G['URL']['APP_RESOURCE_FOX']}js/jquery.gcjs.js"></script>
<script language='javascript' src=".{$_G['URL']['APP_RESOURCE_FOX']}js/tooltipbox.js"></script>
<link href="{$_G['URL']['APP_RESOURCE_FOX']}js/jquery.contextMenu.css" rel="stylesheet">
<style type='text/css'>
	#poster {
		width:320px;height:504px;border:1px solid #ccc;position:relative
	}
	#poster .bg { position:absolute;width:100%;height:100%;z-index:0}
	#poster .drag[type=img] img,#poster .drag[type=thumb] img { width:100%;height:100%; }
	#poster .drag { position: absolute; width:80px;height:80px; border:1px solid #000; }


	#poster .drag[type=nickname] { width:80px;height:40px; font-size:16px; font-family: 黑体;}
	#poster .drag img {position:absolute;z-index:0;width:100%; }

	#poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
		position:absolute;
		width:7px;
		height:7px;
		z-index:1;
		font-size:0;
	}

	#poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
		background:#C00;
	}
	.rLeftDown,.rRightUp{cursor:ne-resize;}
	.rRightDown,.rLeftUp{cursor:nw-resize;}
	.rRight,.rLeft{cursor:e-resize;}
	.rUp,.rDown{cursor:n-resize;}
	.rLeftDown{left:-4px;bottom:-4px;}
	.rRightUp{right:-4px;top:-4px;}
	.rRightDown{right:-4px;bottom:-4px;}
	.rRightDown{background-color:#00F;}

	.rLeftUp{left:-4px;top:-4px;}
	.rRight{right:-4px;top:50%;margin-top:-4px;}
	.rLeft{left:-4px;top:50%;margin-top:-4px;}
	.rUp{top:-4px;left:50%;margin-left:-4px;}
	.rDown{bottom:-4px;left:50%;margin-left:-4px;}
	.context-menu-layer { z-index:9999;}
	.context-menu-list { z-index:9999;}

</style>
                         
{if count($themelist)>1 }

<script type="text/javascript">
function submitForm(){
    var form = document.getElementById("myform");
    form.submit();
}
</script>
<ul class="nav nav-tabs">
    <li role="presentation" class="{php echo $status == 0?active:'';}"><a href="{php echo createWebUrl('poster',array('op' => 'display','status'=>0,'themeid'=>$themeid));}" >海报设置</a></li>
    <li role="presentation" class="{php echo $status == 1?active:'';}"><a href="{php echo createWebUrl('poster',array('op' => 'display','status'=>1,'themeid'=>$themeid));}" >活动首图海报设置</a></li>
        <div class="form-group">
            <label class="col-sm-8 control-label"></label>
            <form id = "myform" action="./index.php" method="get" class="form-horizontal" role="form">
                <input type="hidden" name="c" value="site" />
                <input type="hidden" name="a" value="entry" />
                <input type="hidden" name="m" value="{$_P['m']}" />
                <input type="hidden" name="do" value="{$do}" />
                <input type="hidden" name="op" value="{$op}" />
                <div class="col-sm-3 control-label">
                    <select onchange="submitForm();" class="form-control" name="themeid">
                        {loop $themelist $row}
                        <option value="{$row['id']}" {if $themeid == $row['id'] }selected="selected"{/if}>{$row['id']} - {php echo mb_substr($row['title'],0,8,'utf-8');}</option>
                        {/loop}
                    </select>
                </div>
            </form>
        </div>
</ul>
{/if}
<form class="form-horizontal form" id="form1" action="" method="post" enctype="multipart/form-data">

	<div class="tab-content">

		<div class="tab-pane active"   id="tab_design">{include file='design'}</div>
	</div>

	<div class="form-group">
		<div class="col-sm-9 col-xs-9 col-md-9">
			<input type="hidden" name="__token__" value="{$Request.token}">
			<input type="hidden" name="data" value="" />
			<input name="submit" id="submit" type="submit" value="提交" class="btn btn-primary col-lg-1">

            <a style="margin-left: 20px;" href="{php echo createWebUrl($do, array('op' => 'sheji','themeid'=>$theme['id'],'status'=>$status));}"
               class="btn btn-warning btn-sm" title="重设计" data-toggle="tooltip" data-placement="top"
               onclick="if(!confirm('重新设计海报，确定吗?')) return false;"><i class="fa fa-times"></i>重设计</a>

		</div>
	</div>
</form>
<script language='javascript'>


    $('form').submit(function(){


        var data = [];
        $('.drag').each(function(){
            var obj = $(this);
            var type = obj.attr('type');
            var left = obj.css('left'),top = obj.css('top');
            var d= {left:left,top:top,type:obj.attr('type'),width:obj.css('width'),height:obj.css('height')};
            if(type=='nickname' ||type=='title' || type=='marketprice' || type=='productprice'){
                d.size = obj.attr('size');
                d.color = obj.attr('color');
            } else if(type=='qr'){
                d.size = obj.attr('size');
            } else if(type=='img'){
                d.src = obj.attr('src');
            }
            data.push(d);
        });
        $(':input[name=data]').val( JSON.stringify(data));
        $('form').removeAttr('stop');
        return true;
    });

    function bindEvents(obj){

        var index = obj.attr('index');

        var rs = new Resize(obj, { Max: true, mxContainer: "#poster" });
        rs.Set($(".rRightDown",obj), "right-down");
        rs.Set($(".rLeftDown",obj), "left-down");
        rs.Set($(".rRightUp",obj), "right-up");
        rs.Set($(".rLeftUp",obj), "left-up");
        rs.Set($(".rRight",obj), "right");
        rs.Set($(".rLeft",obj), "left");
        rs.Set($(".rUp",obj), "up");
        rs.Set($(".rDown",obj), "down");
        rs.Scale = true;
        var type = obj.attr('type');
        if(type=='nickname' || type=='img' || type=='title' || type=='marketprice' || type=='productprice'){
            rs.Scale = false;
        }
        new Drag(obj, { Limit: true, mxContainer: "#poster" });
        $('.drag .remove').unbind('click').click(function(){
            $(this).parent().remove();
        })
        
            $.contextMenu({
                selector: '.drag[index=' + index + ']',
                callback: function(key, options) {
                    var index = parseInt($(this).attr('zindex'));

                    if(key=='next'){
                        var nextdiv = $(this).next('.drag');
                        if(nextdiv.length>0 ){
                            nextdiv.insertBefore($(this));
                        }
                    } else if(key=='prev'){
                        var prevdiv = $(this).prev('.drag');
                        if(prevdiv.length>0 ){
                            $(this).insertBefore(prevdiv);
                        }
                    } else if(key=='last'){
                        var len = $('.drag').length;
                        if(index >=len-1){
                            return;
                        }
                        var last = $('#poster .drag:last');
                        if(last.length>0){
                            $(this).insertAfter(last);
                        }
                    }else if(key=='first'){
                        var index = $(this).index();
                        if(index<=1){
                            return;
                        }
                        var first = $('#poster .drag:first');
                        if(first.length>0){
                            $(this).insertBefore(first);
                        }
                    }else if(key=='delete'){
                        $(this).remove();
                    }
                    var n =1 ;
                    $('.drag').each(function(){
                        $(this).css("z-index",n);
                        n++;
                    })
                },
                items: {
                    "next": {name: "调整到上层"},
                    "prev": {name: "调整到下层"},
                    "last": {name: "调整到最顶层"},
                    "first": {name: "调整到最低层"},
                    "delete": {name: "删除元素"}
                }
            });
            obj.unbind('click').click(function(){
                bind($(this));
            })


    }
    var imgsettimer = 0 ;
    var nametimer = 0;
    var bgtimer = 0 ;
    function bindType(type){
        $("#goodsparams").hide();
        $(".type4").hide();
        if(type=='4'){
            $(".type4").show();
        } else if(type=='3'){
            $("#goodsparams").show();
        }
    }

    function clearTimers(){
        clearInterval(imgsettimer);
        clearInterval(nametimer);
        clearInterval(bgtimer);

    }
    function getImgUrl(val){
        if(val.indexOf('http')==-1){
            val = "{$_G['attachurl_remote']}" + val;
        }
        return val;
    }
    function bind(obj){
        var imgset = $('#imgset'), nameset = $("#nameset"),qrset = $('#qrset');
        imgset.hide(),nameset.hide(),qrset.hide();
        clearTimers();
        var type = obj.attr('type');
        if(type=='img'){
            imgset.show();
            var src = obj.attr('src');
            var input = imgset.find('input');
            var img = imgset.find('img');
            if(typeof(src)!='undefined' && src!=''){
                input.val(src);
                img.attr('src',getImgUrl(src));
            }

            imgsettimer = setInterval(function(){
                if(input.val()!=src && input.val()!=''){
                    var url = getImgUrl(input.val());

                    obj.attr('src',input.val()).find('img').attr('src',url);
                }
            },10);

        } else if(type=='nickname' || type=='title' || type=='marketprice' || type=='productprice'){

            nameset.show();
            var color = obj.attr('color') || "#000";
            var size = obj.attr('size') || "13";
            var input = nameset.find('input:first');
            var namesize = nameset.find('#namesize');
            var picker = nameset.find('.sp-preview-inner');
            input.val(color); namesize.val(size.replace("px",""));
            picker.css( {'background-color':color,'font-size':size});

            nametimer = setInterval(function(){
                obj.attr('color',input.val()).find('.text').css('color',input.val());
                obj.attr('size',namesize.val() +"px").find('.text').css('font-size',namesize.val() +"px");
            },10);

        } else if(type=='qr'){
            qrset.show();
            var size = obj.attr('size') || "3";
            var sel = qrset.find('#qrsize');
            sel.val(size);
            sel.unbind('change').change(function(){
                obj.attr('size',sel.val())
            });
        }
    }

    $(function(){
        $('.drag').each(function(){
            bindEvents($(this));
        })

        $(':radio[name=type]').click(function(){
            var type = $(this).val();
            bindType(type);
        })

        $(':radio[name=resptype]').click(function(){
            var type = $(this).val();
            if(type == 1)
            {
                $(".resptype1").show();
                $(".resptype0").hide();
            }
            else
            {
                $(".resptype0").show();
                $(".resptype1").hide();
            }
        })
        //改变背景
        $('#bgset').find('button:first').click(function(){
            var oldbg = $(':input[name=bg]').val();
            bgtimer = setInterval(function(){
                var bg = $(':input[name=bg]').val();
                if(oldbg!=bg){
                    bg = getImgUrl(bg);

                    $('#poster .bg').remove();
                    var bgh = $("<img src='" + bg + "' class='bg' />");
                    var first = $('#poster .drag:first');
                    if(first.length>0){
                        bgh.insertBefore(first);
                    } else{
                        $('#poster').append(bgh);
                    }

                    oldbg = bg;
                }
            },10);
        })

        $('.btn-com').click(function(){

            var imgset = $('#imgset'), nameset = $("#nameset"),qrset = $('#qrset');
            imgset.hide(),nameset.hide(),qrset.hide();
            clearTimers();

            if($('#poster img').length<=0){
                //alert('请选择背景图片!');
                //return;
            }
            var type = $(this).data('type');
            var img = "";
            if(type=='qr'){
                img = '<img src="{$_G['URL']['APP_RESOURCE_FOX']}images/qr.jpg" />';
            }
            else if(type=='head'){
                img = '<img src="{$_G['URL']['APP_RESOURCE_FOX']}images/head.jpg" />';
            }else  if(type=='img' || type=='thumb'){
                img = '<img src="{$_G['URL']['APP_RESOURCE_FOX']}images/img.jpg" />';
            }
            else if(type=='nickname'){
                img = '<div class=text>昵称</div>';
            }
            var index = $('#poster .drag').length+1;
            var obj = $('<div class="drag" type="' + type +'" index="' + index +'" style="z-index:' + index+'">' +
                img+'<div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>');

            $('#poster').append(obj);

            bindEvents(obj);

        });

        $('.drag').click(function(){
            bind($(this))     ;
        })

    })


</script>
